<template>
	<view class="content">
		<view style="">
			<!--			<u-button @click="download" :disabled="itemId===''">下载当前投票页面二维码</u-button>-->
			<u-button @click="toVote" v-if="isVote">去投票</u-button>
			<u-button @click="queryUserVoted">查询当前投票情况</u-button>
			<u-switch v-model="sortChecked" @change="changeSort"></u-switch>
			{{ sortChecked ? '升序排名' : '降序排名' }}
		</view>
		<u-grid :col="2">
			<u-grid-item v-for="(voteItem,index) in list" :key="index">
				<view class="item" @click="seeVote(voteItem.id)">
					<view class="item-right">
						<view> 当前排名:{{ index + 1 }}</view>
						<view> 候选人:{{ voteItem.name }}</view>
						<view v-if="item.type===1">当前投票数:{{ voteItem.voteCount }}</view>
						<view v-if="item.type===2">当前已打分人数:{{ voteItem.voteCount }}</view>
						<view>当前候选人已打总分{{ }}</view>
					</view>
				</view>
			</u-grid-item>
		</u-grid>
		<u-popup v-model="showPopup" mode="center" border-radius="10" length="60%">
			<view style="padding: 20px">
				<view style="display: flex;align-items: center">
					<span style="margin-right: 10px">{{ checkedVoted ? '查看未投票' : '查看已投票' }}</span>
					<u-switch v-model="checkedVoted"></u-switch>
				</view>

				<view v-show="checkedVoted">当前已投票人数:{{ votesUser.length }}</view>
				<view v-show="!checkedVoted">当前未投票人数:{{ notVotesUser.length }}</view>
				<view v-for="(voted,index) in votesUser" :key="index" v-show="checkedVoted">
					<view style="font-size: 3rem">{{ voted.name }}</view>
				</view>
				<view v-for="(voted,index) in notVotesUser" :key="index" v-show="!checkedVoted">
					<view>{{ voted.name }}</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="showUserVotedPopup" mode="center" border-radius="10" length="60%">
			<view style="padding: 20px">
				<view>当前选项已投票人数:{{ voteItemUser.length }}</view>
				<view v-for="(voted,index) in voteItemUser" :key="index">
					<view>{{ voted.name }}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {BASE_URL, checkLogin} from "../../api/common";

var self;
var timer;
export default {
	data() {
		return {
			list: [],
			itemId: "",
			item: {},
			isVote: false,
			votesUser: [],
			notVotesUser: [],
			showPopup: false,
			checkedVoted: true,
			showUserVotedPopup: false,
			voteItemUser: [],
			sortChecked: true,
			isLoading: false
		}
	},
	methods: {
		download() {
			uni.showLoading({
				title: '下载中',
				mask: true
			});
			var oA = document.createElement("a");
			oA.download = '二维码'; // 设置下载的文件名，默认是'下载'
			oA.href = self.item.qrCode;
			document.body.appendChild(oA);
			oA.click();
			oA.remove(); // 下载之后把创建的元素删除
			uni.hideLoading();
		},

		async seeVote(id) {
			uni.showLoading({
				title: '查询中',
				mask: true
			});
			const result = await self.$u.get(BASE_URL + "/vote/seeVote", {
				id,
				itemId: self.itemId
			}, {'satoken': uni.getStorageSync('satoken')})
			uni.hideLoading();
			if (result.code === 200) {
				self.showUserVotedPopup = true;
				self.voteItemUser = result.data;
			} else {
				uni.showToast({
					title: result.msg ?? '查询失败',
					icon: 'none',
					duration: 2000
				});
			}
		},
		async queryUserVoted() {
			uni.showLoading({
				title: '查询中',
				mask: true
			});
			const result = await self.$u.get(BASE_URL + "/vote/getUserVote", {itemId: self.itemId}, {'satoken': uni.getStorageSync('satoken')})
			uni.hideLoading();
			checkLogin(result, self.itemId);
			if (result.code === 200) {
				self.votesUser = result.data.votesUser;
				self.notVotesUser = result.data.notVotesUser;
				self.showPopup = true;
			} else {
				uni.showToast({
					title: result.msg ?? '查询失败',
					icon: 'none',
					duration: 2000
				});
			}
		},
		async checkVote() {
			const result = await self.$u.get(BASE_URL + "/vote/checkVote", {itemId: self.itemId}, {'satoken': uni.getStorageSync('satoken')})
			checkLogin(result, self.itemId);
			if (result.code === 200) {
				self.isVote = true;
			} else {
				self.isVote = false;
			}
		},
		toVote() {
			if (timer) {
				clearInterval(timer);
			}
			uni.navigateTo({
				url: '/pages/index/index?itemId=' + self.itemId
			});
		},
		async changeSort(value) {
			self.isLoading = true;
			const result = await self.$u.get(BASE_URL + "/vote/list", {
				itemId: self.itemId,
				sort: self.sortChecked ? 'asc' : 'desc'
			}, {'satoken': uni.getStorageSync('satoken')})
			checkLogin(result, self.itemId);
			self.list = result.data.list;
			self.item = result.data.vote;
			self.isLoading = false;
		},
		startLoad() {
			timer = setInterval(async () => {
				if (self.isLoading) {
					return;
				}
				const result = await self.$u.get(BASE_URL + "/vote/list", {
					itemId: self.itemId,
					sort: self.sortChecked ? 'asc' : 'desc'
				}, {'satoken': uni.getStorageSync('satoken')})
				checkLogin(result, self.itemId);
				if (self.isLoading) {
					return;
				}
				self.list = result.data.list;
				self.item = result.data.vote;
			}, 2000)
		}
	},
	onUnload() {
		if (timer) {
			clearInterval(timer);
		}
	},
	async onLoad(query) {
		self = this;
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		self.itemId = query.itemId;
		console.log(query)
		const result = await self.$u.get(BASE_URL + "/vote/list", {itemId: self.itemId}, {'satoken': uni.getStorageSync('satoken')})
		checkLogin(result, self.itemId);
		uni.hideLoading();
		if (result.code === 200) {
			// 开启监听
			setTimeout(() => {
				self.startLoad();
			}, 1000)
			self.list = result.data.list;
			self.item = result.data.vote;
			await self.checkVote();
		}
	},
	beforeDestroy() {
		if (timer) {
			clearInterval(timer);
		}
	},
	onShow() {

	}
}
</script>

<style>
.content {

}

.item {
	display: flex;
	align-items: center;
}

.item-right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 10 rpx;
}


</style>
